<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
    <h2 :style="{opacity}">Vue So Easy!</h2>
    <button @click="$destroy()">销毁vm</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: "#test",
      data: {
        opacity: 1
      },

      // 初始挂载之后执行的钩子(回调函数)
      // 一般在此: 执行异步操作, 比如: 启动定时器/发ajax请求
      mounted () {
        // 启动一个循环定时器, 每隔100mS, 将opacity减少0.1
        this.intervalId = setInterval(() => {
          console.log('-------')
          this.opacity -= 0.1
          // 一旦小于等于0, 变为1
          if (this.opacity<=0) {
            this.opacity = 1
          }
        }, 100);
      },

      // 销毁前执行的钩子
      // 一般在此执行一些收尾的工作, 比如: 清除定时器,解绑监听
      beforeDestroy () {
        // 清除定时器
        clearInterval(this.intervalId)
      }
    })

    

    /* 
    componnetWillMount
    componnetDidMount
    */
  </script>
</body>
</html>